import { PropsWithChildren } from 'react'
import Button from '../Button'
import styles from './style.module.css'

interface NavItemProps {
  key?: number | string
  type?: string
  className?: string
}

const NavItem = ({
  type = 'primary', className = '', children
}: PropsWithChildren<NavItemProps>) => {
  if (type === 'primary') return (
    <li className={`nav-link-item h-full font-semibold text-sm ${className}`}>{children || ''}</li>
  )
  return <li className={className}>{children || ''}</li>
}

export default function Header() {
  const navs: PropsWithChildren<NavItemProps>[] = [
    { children: <a href="" className='hover:text-primary'>Inspiration</a> },
    { children: <a href="" className='hover:text-primary'>Find Work</a> },
    { children: <a href="" className='hover:text-primary'>Learn Design</a> },
    { children: <a href="" className='hover:text-primary'>Go Pro</a> },
    { children: <a href="" className='hover:text-primary'>Hire Designers</a> }
  ]
  return (
    <header className={`fixed flex w-full z-10 justify-around h-24 xl:h-32 ${styles.header}`}>
      <div className="flex items-center justify-between mx-6 xl:hidden">
        <img src="/imgs/icon-menu.svg" alt=""
          className='w-10 pl-2'
        />
      </div>
      <div className="w-30 flex flex-1 flex-grow items-center justify-center xl:justify-start xl:ml-8">
        <img src="/imgs/logo-black.svg" alt="" className={`h-full w-28 ${styles.icon}`}/>
        {/* 收起的菜单 */}
        <div className="nav-link hidden xl:inline-block">
          <ul className='h-full flex flex-row xl:flex-1 xl:ml-5 xl:justify-center xl:items-start'>
            {navs.map((item, index) => (
              <NavItem key={index} {...item} className={styles.link} />
            ))}
          </ul>
        </div>
      </div>
      <div className="w-auto mr-4 flex items-center justify-start">
        <span className={`flex items-center justify-center h-full text-2xl pr-6 xl:pr-2 cursor-pointer ${styles.login}`}>Sign in</span>
        <Button className='hidden xl:inline-block'>Sign up</Button>
      </div>
    </header>
  )
}